<template>
	<div>
		<el-row :gutter="24" v-if="tableFlog">
			<el-col :span="24">
				<el-row :gutter="24">
					<el-col :span="2" style="margin-right:0px;">
						<p class="queryLabel">选择年:</p>
					</el-col>
					<el-col :span="7">
						<el-date-picker size="small" v-model="sel.year" :editable=false type="year" placeholder="年份">
						</el-date-picker>
					</el-col>
					<el-col :span="4" style="padding-left: 0px;text-align: right">
						<el-button type="primary" size="small" v-on:click='monthlyQuery'>查询</el-button>
						<el-button type="primary" size="small" v-on:click='addMonth'>新增月结</el-button>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-table :data="tableData.dataList" border style="width: 100%;align-content: center;">
							<el-table-column label="月份" align="center" prop="monthlyBalanceMonth">
							</el-table-column>
							<el-table-column label="结算时间" align="center" prop="monthlyBalanceStopDate">
							</el-table-column>
							<el-table-column label="结算人" align="center" prop="uName">
							</el-table-column>
							<el-table-column label="差异总额" align="center" prop="diffAll">
							</el-table-column>
							<el-table-column label="状态" align="center" prop="status">
							</el-table-column>
							<el-table-column label="操作" align="right" width="160">
								<template scope="scope">
									<el-button type="primary" v-if="scope.row.status=='月结中'" size="mini" icon="d-arrow-left" @click.native.prevent="infoEndStop(scope.$index)">重置月结</el-button>
									<el-button type="primary" v-if="scope.row.status=='月结中'||scope.row.status=='反月结'" size="mini" icon="check" @click.native.prevent="infoEnd(scope.$index)">月结</el-button>
									<!--<el-button type="primary" v-if="scope.row.status=='未月结'||scope.row.status=='反月结'" size="mini" icon="check" @click.native.prevent="info(scope.$index)">申请月结</el-button>-->
									<el-button type="primary" v-if="scope.row.status=='已月结'" size="mini" icon="close" @click.native.prevent="infos(scope.$index)">反月结</el-button>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
						</el-pagination>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
		<el-dialog title="审批详情" v-model="addFormShow" size="tiny">
			<el-form :model="FormData" ref="comForm" :rules="Rule" label-width="130px">
				<el-col :span="24">
					<el-form-item label="月结月份：" prop="endMonthly" required>
						<el-date-picker  v-model="FormData.endMonthly" size="small" style="width:100%;" type="month" clearable placeholder="月结月份">
						</el-date-picker>
					</el-form-item>
				</el-col>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addFormShow = false">取 消</el-button>
				<el-button type="primary" v-on:click='save'>申请月结</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
//	import moment from 'moment'
	export default {
		data: function() {
			return {
				//新增窗口
				addFormShow: false,
				//月结窗口
				FormData:{
					endMonthly:""
				},
				//新增的校验规则
				Rule: {
					endMonthly: [{
						type: 'date',
						required: true,
						message: '请选择月份',
						trigger: 'blur'
					}]
				},
				//查询条件
				sel: {
					year: new Date(),
				},
				//列表与详情切换的标识
				tableFlog: true,
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,

				monthlyList: 'first',
				//公司数据
				tableData: {
					total: 0,
					dataList: []
				},
				tableDatas: {
					total: 0,
					dataList: []
				},
				monthId: "",
				//新增页面
				addMonthlyFormShow: false,
				months: "",				
				//打印窗口属性
				prientShow: false,
				wrehouseConvertData: "",
			}
		},
		methods: {
			addMonth:function(){
				this.$data.FormData.endMonthly="";
				this.$data.addFormShow=true;
			},
			//保存新增月结
			save:function(){
				var months=this.moment(this.$data.FormData.endMonthly).format("YYYYMM");
				debugger;
				this.newMonthly(months);
			},
			//发出仓库代码与名称转换
			wrehouseCov: function(row, column) {
				return this.$data.wrehouseConvertData[row.warehouse];
			},
			//仓库转换转换
			warehouseCovert: function() {
				this.$http.get(this.API_ROOT + '/scm/warehouse/convert', {
					params: {}
				}).then((response) => {
					this.$data.wrehouseConvertData = response.data;
				}, (response) => {});
			},
			//状态转换
			TypeCov: function(row, column) {
				var temp = '';
				switch(row.status) {
					case '0':
						temp = "已月结";
						break;
					case '1':
						temp = '未月结';
						break;
					default:
						temp = "未月结";
						break
				};
				return temp;
			},
			//返回列表
			buckList: function() {
				this.$data.tableFlog = true;
				this.companyQuery();
			},
			//月结
			infoEnd: function(index) {
				debugger;
				this.$data.monthId = this.$data.tableData.dataList[index].id;
				//判断是否为未月结
				if(this.$data.tableData.dataList[index].status == '已月结') {
					this.$message.error("该月已月结！");
				} else {
					this.add();
					debugger;
					//this.monthlyQuery();
				}
			},
			//重置月结
			infoEndStop: function(index) {
				debugger;
				this.$data.monthId = this.$data.tableData.dataList[index].id;
				this.$http.get(this.API_ROOT + '/scm/monthlyBalance/unMonthlyBalance', {//接口地址更改
					params: {
						id: this.$data.monthId
					}
				}).then(resp => {
					if(resp.data.success) {
						this.$message(resp.data.msg);
						this.monthlyQuery();
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
			},
			//申请月结
			info: function(index) {
				debugger;
				this.$data.monthId = this.$data.tableData.dataList[index].id;
				//判断是否为未月结
				if(this.$data.tableData.dataList[index].status == '已月结') {
					this.$message.error("该月已月结！");
				} else {
					this.newMonthly();
					debugger;
					//this.monthlyQuery();
				}
			},

			//反月结
			infos: function(index) {
				debugger;
				this.$data.monthId = this.$data.tableData.dataList[index].id;
				if(this.$data.tableData.dataList[index].status != '已月结') {
					this.$message.error("该月未月结！");
				} else {
					this.del();
					//this.monthlyQuery();
				}
			},
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				//this.$data.dictGroup = '';
				this.monthlyQuery();
			},
			//查询月结列表
			monthlyQuery: function() {
				this.$data.sel.year = this.momentFu(this.$data.sel.year);
				//this.$data.months
				this.$http.post(this.API_ROOT + '/scm/monthlyBalance/mangins', this.$data.sel, {
					params: {
						//month: this.$data.months
						start: this.$data.CurentPage,
						limit: this.$data.page.pageSize
					}
				}).then(resp => {
					if(resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						debugger;
						this.$data.tableData = resp.data;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {})
			},
			newMonthly: function(val) {
				debugger;
				this.$http.get(this.API_ROOT + '/scm/monthlyBalance/applyMonthlyBalance', {
					params: {
						month: val
					}
				}).then(resp => {
					if(resp.data.success) {
						this.$message(resp.data.msg);
						this.monthlyQuery();
						this.$data.addFormShow=false;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {})
			},
			//月结
			add: function() {
				this.$http.get(this.API_ROOT + '/scm/monthlyBalance/monthlyBalance', {
					params: {
						id: this.$data.monthId
					}
				}).then(resp => {
					if(resp.data.success) {
						this.$message(resp.data.msg);
						this.monthlyQuery();
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
			},
			//反月结
			del: function() {
				this.$http.get(this.API_ROOT + '/scm/monthlyBalance/unMonthlyBalance', {
					params: {
						id: this.$data.monthId
					}
				}).then(resp => {
					if(resp.data.success) {
						this.$message(resp.data.msg);
						this.monthlyQuery();
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
			},
			//时间判断为空的封装
			momentFu: function(dt) {
				if(dt == '' || dt == null || dt == undefined) {
					return "";
				} else {
					return this.moment(dt).format("YYYY");
				}
			},

		},
		created: function() {
			this.monthlyQuery();
			this.warehouseCovert();
		},

	}
</script>

<style>

</style>